<template>
    <div class="container yuan-container goods-auth">

        <a-card title="商品审核">
            <div class="filter-panel">
                <div class="filter-list">
                    <span>商品信息：</span>
                    <a-input-search allowClear v-model="pageParams.keywords" placeholder="商品编号/商品名称" @search="resetList" />
                </div>
                <div class="filter-list">
                    <span>状态：</span>
                    <a-select v-model="pageParams.auditStatus" @change="resetList" allowClear placeholder="审核状态">
                        <a-select-option :value="0">未审核</a-select-option>
                        <a-select-option :value="1">已通过</a-select-option>
                        <a-select-option :value="2">已拒绝</a-select-option>
                    </a-select>
                </div>
                <!-- <div class="filter-list">
                    <span>创建时间：</span>
                    <a-range-picker @change="dateChange" :placeholder="['开始日期','结束日期']" :format="['YYYY-MM-DD','YYYY-MM-DD']" />
                </div> -->
            </div>
            <div class="table">
                <a-table bordered :loading="loading" :rowKey="(item,i)=>item.id" :columns="columns" :data-source="pageList"
                    :pagination="pagination">
                    <template slot='action' slot-scope="text, record, index">
                        <div>
                            <a-button type="warning" @click="clickAuth(record)" v-if="record.auditStatus===0">审核</a-button>
                            <a-button type="primary" @click="clickShow(record)">查看</a-button>
                        </div>
                    </template>
                </a-table>
            </div>
        </a-card>
        <DetailVue :visible="detailVisible" @closeModal="() => detailVisible = false" :editInfo="editInfo" @resetList="resetList" :isShow="isShow"/>
    </div>
</template>
<script lang="ts">
import api from "@/api/api";
import shopMallApi from "@/api/shopMallApi";
import { format } from "@/utils";
import { h } from "vue";
import { Component, Vue } from "vue-property-decorator";
import DetailVue from "./goodsAuthDetail.vue";
@Component({
    name: "tpl",
    components: { DetailVue },
})
export default class extends Vue {
    loading = false;
    pageList = [];
    pagination = {
        current: 1,
        pageSize: 10,
        total: 0,
        onChange: this.pageChange,
    };
    pageParams: any = {
        keywords: "",
    };
    columns = [
        {
            align: "center",
            dataIndex: "id",
            key: "id",
            title: "商品编号",
            width: 350,
        },
        {
            align: "center",
            dataIndex: "name",
            key: "name",
            title: "商品名称",
            width: 350,
        },
        {
            align: "center",
            dataIndex: "placeOrganizationName",
            key: "placeOrganizationName",
            title: "所属机构",
        },
        // {
        //     align: "center",
        //     dataIndex: "freight",
        //     key: "freight",
        //     title: "运费(元)",
        //     customRender: (text: string, record: any, index: number) => {
        //         return record.freight / 100;
        //     },
        // },
        {
            align: "center",
            dataIndex: "auditStatus",
            key: "auditStatus",
            title: "审核状态",
            customRender: (text: string, record: any, index: number) => {
                if (record.ifSubmitAudit === 1 && record.auditStatus === 0) {
                    return h("div", { class: "status-words c-primary" }, "待审核");
                }
                const data = {
                    0: { title: "未审核", class: "status-words c-warning" },
                    1: { title: "已通过", class: "status-words c-success" },
                    2: { title: "已拒绝", class: "status-words c-danger" },
                };
                const dataOne = data[record.auditStatus] || {};
               
                const dom = h("div", { class: dataOne.class }, dataOne.title);
                return dom;
            },
        },

        {
            align: "center",
            dataIndex: "createTime",
            key: "createTime",
            title: "创建时间",
            customRender: (text: string, record: any, index: number) => {
                return format(record.createTime, "yyyy-MM-dd hh:mm:ss");
            },
        },

        {
            align: "center",
            dataIndex: "action",
            key: "action",
            title: "操作",
            width: 270,
            scopedSlots: { customRender: "action" },
        },
    ];
    async getList() {
        this.pageList = [];
        this.loading = true;
        try {
            const res = await shopMallApi.findAuditGoods({
                ...this.pageParams,
                pageSize: this.pagination.pageSize,
                pageNum: this.pagination.current,
                searchContent: this.pageParams.keywords,
            });
            this.pageList = res.data?.rows || [];
            this.pagination.total = res.data?.total || 0;
        } finally {
            this.loading = false;
        }
    }
    resetList() {
        this.pagination.current = 1;
        this.getList();
    }
    pageChange(page: number, pageSize: number) {
        this.pagination.pageSize = pageSize;
        this.pagination.current = page;
        this.getList();
    }

    mounted() {
        this.getList();
    }

    detailVisible = false;
    editInfo = {};
    isShow=false
    clickAuth(item) {
        this.isShow=false
        this.editInfo = item;
        this.detailVisible = true;
    }
    clickShow(item) {
         this.isShow=true
        this.editInfo = item;
        this.detailVisible = true;
    }

    dateChange(e: any[]) {
        const arr = e.map((item) => item.format("YYYY-MM-DD"));
        this.pageParams.beginTime = arr[0] + " 00:00:00";
        this.pageParams.endTime = arr[1] + " 23:59:59";
        this.resetList();
    }
}
</script>
<style scoped lang="scss">
.goods-auth {
}
</style>
